
document.addEventListener('DOMContentLoaded', () => {
    const courseList = document.getElementById('courseList');
    const filterSelect = document.getElementById('filter');
    const toast = document.getElementById('toast'); // 假设HTML中存在Toast容器

    // 选课按钮点击事件
    courseList.addEventListener('click', (e) => {
        const btn = e.target.closest('.select-btn');
        if (btn) {
            const courseId = btn.dataset.courseId;
            const courseName = btn.closest('tr').querySelector('td:nth-child(2)').textContent;
            handleCourseSelection(courseId, courseName);
        }
    });

    // 课程筛选事件
    filterSelect.addEventListener('change', (e) => {
        const filterValue = e.target.value.toLowerCase();
        Array.from(courseList.children).forEach(row => {
            const courseType = row.querySelector('td:nth-child(7)').textContent.toLowerCase(); // 课程类型在第7列
            const isMatch = !filterValue || courseType.includes(filterValue);
            row.style.display = isMatch ? 'table-row' : 'none';
        });
    });

    // 处理选课逻辑
    function handleCourseSelection(courseId, courseName) {
        // 模拟AJAX请求（请替换为真实接口）
        fetch(`/student/course/select/${courseId}`, { method: 'POST' })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast(`成功选择课程：${courseName}`, 'success');
                    // 禁用按钮并添加视觉反馈
                    const btn = courseList.querySelector(`[data-course-id="${courseId}"] .select-btn`);
                    btn.disabled = true;
                    btn.classList.add('opacity-50', 'cursor-not-allowed');
                    btn.textContent = '已选择';

                } else {
                    showToast(data.message, 'error');
                }
            })
            .catch(error => {
                showToast('选课失败，请重试', 'error');
                console.error('选课请求失败:', error);
            });
    }

    // Toast提示函数
    function showToast(message, type = 'info') {
        const toastClass = {
            success: 'bg-green-100 border-green-200 text-green-700',
            error: 'bg-red-100 border-red-200 text-red-700',
            info: 'bg-blue-100 border-blue-200 text-blue-700'
        }[type] || 'bg-blue-100 border-blue-200 text-blue-700';

        const toastElement = document.createElement('div');
        toastElement.className = `toast fixed bottom-4 right-4 p-4 rounded-lg shadow ${toastClass} transition-opacity duration-300 opacity-0 translate-y-4 visible`;
        toastElement.innerHTML = `
            <div class="flex items-center gap-2">
                <i class="fa ${type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle'}"></i>
                <span>${message}</span>
            </div>
        `;

        document.body.appendChild(toastElement);

        // 动画效果
        setTimeout(() => toastElement.classList.add('opacity-100', 'translate-y-0'), 10);
        setTimeout(() => toastElement.remove(), 3000);
    }
});
